Estoy tratando de implementar la carga de imágenes en un proyecto, pero el inspector de Chrome dice que no se puede encontrar el archivo. El HTML parece estar bien. No estoy muy seguro sobre el CSS y Javascript. ¿Es esto algún tipo de problema de medida de seguridad/firewall? Estoy usando una Mac si eso ayuda.
const image_input = document.querySelector("#image_input"); var uploaded_image = ""; image_input.addEventListener("change", function() { const reader = new FileReader(); reader.addEventListener("load", () => { uploaded_image = reader.result; document.querySelector("#display_image").style.backgroundImage = 'url(${uploaded_image})' }); reader.readAsDataURL(this.files[0]); }) body { display: flex; justify-content: center; align-items: center; gap: 10px; flex-direction: column; height: 100vh; } #display_image { width: 375px; height: 211px; border: 1px solid black; background-position: center; background-size: cover; } <input type="file" id="image_input" accepts="image/png, image/jpg"> <div id="display_image"></div>